﻿@{
    Layout = "../Shared/_LayoutMain.cshtml";
    ViewBag.PageTitle = "订单详情 - " + ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<div class="wrapper">
    <div class="account-box">
        @{
            await Html.RenderPartialAsync("_AccountNav", "order");
        }
        <div class="right-box">
            <div class="tab-box">
                <div class="menu-box">
                    <div class="item-box active">
                        <span>我的订单</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="order-detail">
                    <div class="screen-box">
                        <div class="nav-bar">
                            <span>订单信息</span>
                            <span class="tip">{{stateTip}}</span>
                        </div>
                        <div class="item-box">
                            <div class="item">
                                <div class="left">订单编号</div>
                                <div class="right">{{model.orderNo}}</div>
                            </div>
                            <div class="item">
                                <div class="left">订单日期</div>
                                <div class="right">{{model.addTime}}</div>
                            </div>
                            <div class="item">
                                <div class="left">订单类型</div>
                                <div v-if="model.orderType===0" class="right">普通订单</div>
                                <div v-if="model.orderType===1" class="right">限时抢购</div>
                                <div v-if="model.orderType===2" class="right">积分换购</div>
                            </div>
                            <div class="item">
                                <div class="left">支付方式</div>
                                <div class="right">{{model.paymentTitle}}</div>
                            </div>
                            <div class="item">
                                <div class="left">配送方式</div>
                                <div class="right">{{model.shopDelivery.title}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="screen-box">
                        <div class="nav-bar">
                            <span>收货信息</span>
                        </div>
                        <div class="item-box">
                            <div class="item">
                                <div class="left">收货人</div>
                                <div class="right">{{model.acceptName}}</div>
                            </div>
                            <div class="item">
                                <div class="left">收货地址</div>
                                <div class="right">{{model.address}}</div>
                            </div>
                            <div class="item">
                                <div class="left">联系电话</div>
                                <div class="right">{{model.mobile}}</div>
                            </div>
                            <div class="item">
                                <div class="left">订单留言</div>
                                <div class="right">{{model.postscript}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="screen-box">
                        <div class="nav-bar">
                            <span>商品信息</span>
                        </div>
                        <div class="goods-box">
                            <div v-for="(item,index) in model.orderGoods" :key="index" class="list-box">
                                <a :href="'/shop/goods/show/'+item.goodsId" class="img-box">
                                    <img :src="common.loadFile(item.imgUrl)">
                                </a>
                                <div class="txt-box">
                                    <span class="title">{{item.goodsTitle}}</span>
                                    <span class="info">{{item.specText}} x {{item.quantity}}</span>
                                    <span class="price">{{item.realPrice}}</span>
                                </div>
                                <div v-if="model.paymentStatus===1" class="btn-box">
                                    <el-tag v-if="item.deliveryStatus===2" type="info">已退货</el-tag>
                                    <el-button v-if="item.deliveryStatus===1" size="small" type="warning" @@click="common.linkUrl('/account/refund/add/'+item.id)">申请售后</el-button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="total-box">
                        <span class="text">共 {{model.orderGoods.length}} 件商品</span>
                        <span class="text">商品金额：<b class="price">{{model.realAmount}}</b></span>
                        <span v-if="model.realFreight>0" class="text">配送费用：<b class="price">{{model.realFreight}}</b>元</span>
                        <span v-if="model.couponAmount>0" class="text">优惠券抵：-<b class="price">{{model.couponAmount}}</b>元</span>
                        <span v-if="model.promotionAmount>0" class="text">促销优惠：-<b class="price">{{model.promotionAmount}}元</b></span>
                        <span v-if="model.discountAmount>0" class="text">其它优惠：-<b class="price">{{model.discountAmount}}</b>元</span>
                        <span v-if="model.orderType===2" class="text">兑换积分：<b class="point">{{model.point}}</b>分</span>
                    </div>

                    <div class="amount-box">
                        实付金额：<span class="price">{{model.orderAmount}}元</span>
                    </div>

                    <div class="btn-box">
                        <el-button v-if="model.deliveryStatus>0" @@click="common.linkUrl('/account/order/delivery?no='+model.orderNo)" type="primary">查看物流</el-button>
                        <el-button v-if="model.status<3&&model.paymentStatus==0" @@click="cancelOrder" type="warning">取消订单</el-button>
                        <el-button v-if="model.status===1&&model.paymentStatus==0" @@click="common.linkUrl('/payment/confirm?no='+model.tradeNo)" type="success">去付款</el-button>
                        <el-button v-if="model.status===3||model.status===4" @@click="confirmOrder" type="danger">确认收货</el-button>
                        <el-button v-if="model.status===5&&model.orderGoods.find(val=>val.deliveryStatus===1&&val.evaluateStatus===0)" @@click="common.linkUrl('/account/evaluate/edit/'+model.id)" type="success">去评价</el-button>
                        <el-button v-if="model.status>2" @@click="common.linkUrl('/account/refund/list?no='+model.orderNo)" type="danger">售后详情</el-button>
                        <el-button @@click="common.back(-1)">返回上一页</el-button>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                id: @Model,
                stateTip: '已下单',
                model: {
                    orderGoods: [],
                    sitePayment: {},
                    shopDelivery: {},
                },
                account: null, //会员信息
            },
            methods: {
                //初始化数据
                async initData(id) {
                    let _this = this;
                    if (id < 1) {
                        this.$alert('订单参数有误，请检查重试', '错误提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                common.back(-1);
                            }
                        });
                        return;
                    }
                    //加载订单信息
                    await AxiosAjax({
                        url: `/account/order/${id}`,
                        success: function (res) {
                            _this.model = res.data;
                            if (_this.model.status === 1) {
                                _this.stateTip = '待付款';
                            } else if (_this.model.status === 2) {
                                _this.stateTip = '待发货';
                            } else if (_this.model.status === 3) {
                                _this.stateTip = '待收货';
                            } else if (_this.model.status === 4) {
                                _this.stateTip = '已签收';
                            } else if (_this.model.status === 5) {
                                _this.stateTip = '交易成功';
                                if (_this.model.orderGoods.find(val => val.deliveryStatus===1&&val.evaluateStatus === 0)) {
                                    _this.stateTip = '待评价';
                                }
                            } else if (_this.model.status === 6) {
                                _this.stateTip = '交易取消';
                                
                            } else if (_this.model.status >= 7) {
                                _this.stateTip = '交易作废';
                            }
                        }
                    });
                    //加载会员信息
                    await AxiosAjax({
                        url: `/account/member/info`,
                        success(res) {
                            _this.account = res.data;
                        }
                    });
                },
                //取消订单
                async cancelOrder() {
                    let _this = this;
                    _this.$confirm('确认要取消该订单吗？', '操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        AxiosAjax({
                            method: 'put',
                            url: `/account/order/cancel/${_this.model.id}`,
                            loading: true,
                            successMsg: '订单已取消',
                            success(res) {
                                _this.model.status = 6; //更改订单状态
                            }
                        })
                    }).catch(function () { });
                },
                //确认收货
                async confirmOrder() {
                    let _this = this;
                    _this.$confirm('确认已收到货了吗？', '操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        AxiosAjax({
                            method: 'put',
                            url: `/account/order/confirm/${_this.model.id}`,
                            loading: true,
                            successMsg: '交易已成功',
                            success(res) {
                                _this.model.status = 5; //更改订单状态
                            }
                        })
                    }).catch(function () { });
                },
            },
            created() {
                this.initData(this.id);
            }
        })
    </script>
}